<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/11/12
  Time: 21:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<jsp:include page="common/page.jsp"></jsp:include>
<jsp:include page="common/page.jsp"></jsp:include>
<body>
<%--面板--%>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">用户列表</h3></div>
    <%--增删改查按钮--%>
    <div class="panel-body">
        <form class="form-inline" style="float: right">
            <div class="form-group">
                <input type="text" id="name" class="form-control" placeholder="请输入关键词"/>
            </div>
            <button type="button" onclick="search()" class="btn btn-default"><span
                    class="glyphicon glyphicon-search"></span> 查询
            </button>
            <button type="button" onclick="add()" class="btn btn-default "><span
                    class="glyphicon glyphicon-plus"></span> 添加
            </button>
            <button type="button" onclick="del()" class="btn btn-default"><span
                    class="glyphicon glyphicon-trash"></span> 删除
            </button>
        </form>
    </div>
    <table id="table"></table>
</div>


<%--修改职位模态框--%>
<div class="modal fade" id="modal-id">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12" id="updatebody">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="upd()">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--增加模态框-->
<div class="modal fade inmodal" id="addmodal">
    <div class="modal-dialog" id="md">
        <form class="form-horizontal" id="userform" method="post" role="form">
            <input type="hidden" name="pn">
            <div class="modal-content animated bounceInLeft">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">注册用户</h4>
                </div>
                <div class="modal-body" id="bd">
                    <div class="form-group">
                        <label class="col-sm-4 text-right">用户名</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="userName" name="username" placeholder="用户名"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">性别</label>
                        <div class="col-sm-6">
                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" checked name="sex" value="0" style="margin-top: 2px">
                                男
                            </div>
                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" name="sex" value="1" style="margin-top: 2px"> 女
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 text-right">职位</label>
                        <div class="col-sm-6">
                            <select class="form-control" id="select">
                                <option value="1">市场部</option>
                                <option value="2">市场行政部</option>
                                <option value="3">保洁部</option>
                                <option value="4">人事部</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">入职时间：</label>
                        <div class="col-sm-6">
                            <div class="input-group" id="datetimepicker2">
                                <input name="mountguarddate" id="data" type='text' class="form-control"/>
                                <span class="input-group-addon"><span
                                        class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button onclick="doadd()" type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>

<%--树形图模态框--%>
<div class="modal fade" id="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <div id="treeview"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="search" onclick="fenpei()">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script>
    /*加载页面读取数据*/
    $("#table").bootstrapTable({
        url: "${pageContext.request.contextPath}/user/query",
        pagination: true,
        height: 500,
        pageSize: 4,
        striped: true,
        clickToSelect: true,
        sidePagination: "server",
        queryParamsType: '',
        pageList: [2, 4, 8],
        queryParams: query,

        columns: [{
            /*添加复选框*/
            singleSelect: false,
            checkbox: true
        }, {
            title: "ID",
            field: "attendld"
        }, {
            title: "性别",
            field: "sex",
            formatter: function (value, row, index) {
                if (row.sex == 0) {
                    return "男"
                } else {
                    return "女"
                }
            }
        }, {
            title: "姓名",
            field: "staffName"
        }, {
            title: "职位",
            field: "deptName"
        }, {
            title: "签到日期",
            field: "attendDate"
        }, {
            title: "签到时间",
            field: "attendIn"
        }, {
            title: "签退时间",
            field: "attendOut"
        }, {
            title: "操作",
            formatter: function (index, row, value) {
                return "<button class='btn btn-default' onclick='update(" + row.attendld + ")' id='update'>修改职位</button>&nbsp;" +
                    "<button class='btn btn-default' id='pass' onclick='pass()'>添加用户</button>&nbsp;" +
                    "<button class='btn btn-default' id='tree' onclick='treeview(" + row.attendld + ")'>树形图</button>"
            }
        }]
    })


    /*时间日历*/
    $('#datetimepicker1').datetimepicker({
        format: 'YYYY/MM/DD',
        locale: moment.locale('zh-cn')
    });
    <!--时间日历-->
    $('#datetimepicker2').datetimepicker({
        format: 'YYYY/MM/DD',
        locale: moment.locale('zh-cn')
    });

    var nodeCheckedSilent = false;
    var nodeUncheckedSilent = false;

    function nodeChecked(event, node) {
        if (nodeCheckedSilent) {
            return;
        }
        nodeCheckedSilent = true;
        checkAllParent(node);
        checkAllSon(node);
        nodeCheckedSilent = false;
    }

    function nodeUnchecked(event, node) {
        if (nodeUncheckedSilent)
            return;
        nodeUncheckedSilent = true;
        uncheckAllParent(node);
        uncheckAllSon(node);
        nodeUncheckedSilent = false;
    }

    //选中全部父节点
    function checkAllParent(node) {
        $('#treeview').treeview('checkNode', node.nodeId, {
            silent: true
        });
        var parentNode = $('#treeview').treeview('getParent', node.nodeId);
        if (!("nodeId" in parentNode)) {
            return;
        } else {
            checkAllParent(parentNode);
        }
    }

    //取消全部父节点
    function uncheckAllParent(node) {
        $('#treeview').treeview('uncheckNode', node.nodeId, {
            silent: true
        });
        var siblings = $('#treeview').treeview('getSiblings', node.nodeId);
        var parentNode = $('#treeview').treeview('getParent', node.nodeId);
        if (!("nodeId" in parentNode)) {
            return;
        }
        var isAllUnchecked = true; //是否全部没选中
        for (var i in siblings) {
            if (siblings[i].state.checked) {
                isAllUnchecked = false;
                break;
            }
        }
        if (isAllUnchecked) {
            uncheckAllParent(parentNode);
        }

    }

    //级联选中所有子节点
    function checkAllSon(node) {
        $('#treeview').treeview('checkNode', node.nodeId, {
            silent: true
        });
        if (node.nodes != null && node.nodes.length > 0) {
            for (var i in node.nodes) {
                checkAllSon(node.nodes[i]);
            }
        }
    }

    //级联取消所有子节点
    function uncheckAllSon(node) {
        $('#treeview').treeview('uncheckNode', node.nodeId, {
            silent: true
        });
        if (node.nodes != null && node.nodes.length > 0) {
            for (var i in node.nodes) {
                uncheckAllSon(node.nodes[i]);
            }
        }
    }

    /*加载树形图模态框*/
    var roidId;

    function treeview(attendld) {
        roidId = attendld;
        $('#modal').modal('show');
        /*模态框加载完成加载树形图*/
        $('#modal').on("shown.bs.modal", function () {
            $.post('${pageContext.request.contextPath}/user/dofenpei', {"sid": attendld}, function (data) {
                /*把树形图treeDate加载到模态框里*/
                $('#treeview').treeview({
                    data: data,
                    levels: 2,
                    expandIcon: "glyphicon glyphicon-chevron-right",//图案可以自己选择
                    collapseIcon: "glyphicon glyphicon-chevron-down",
                    emptyIcon: "glyphicon glyphicon-th-large",//设置没有子节点的菜单前的图标
                    showCheckbox: true,//复选框设置，也可以是true
                    onNodeChecked: nodeChecked,
                    onNodeUnchecked: nodeUnchecked
                })
            })
        })
    }

    function fenpei() {
        var pmid = "";
        var cks = $('#treeview').treeview('getChecked');
        $.each(cks, function (i, n) {
            pmid = pmid + "===" + n.id;

        })
        $.post('${pageContext.request.contextPath}/rolePermission/grantPermission', {
            'roleid': roidId,
            'pmid': pmid
        }, function (data) {
            $("#modal").modal("hide")


        })
    }

    /*添加*/
    function doadd() {
        var staffName = $('#userName').val();
        var sex = $("input[name='sex']:checked").val();
        var depeld = $('#select').val();
        var date = $('#data').val();
        if (staffName == null || staffName == '') {
            swal({
                "title": "用户名不能为空",
                "type": "error",
            })
            return;
        } else if (date == null || date == '') {
            swal({
                "title": "签到日期不能为空",
                "type": "error"
            })
            return;
        }
        $.ajax({
            url: "${pageContext.request.contextPath}/user/add",
            data: {
                'staffName': staffName,
                'sex': sex,
                'depeld': depeld,
                'data': date
            },
            success: function (data) {
                if (data > 0) {
                    swal({
                        "title": "添加成功",
                        "type": "success"
                    }, function (data) {
                        if (data) {
                            history.go(0);
                        }
                    });
                }
            }
        })
    }

    /*加载添加模态框*/
    function pass() {
        $("#addmodal").modal("show")
    }

    /*传参*/
    var offset;
    var limit;

    function query(params) {
        offset = params.pageNumber;
        limit = params.pageSize;
        var temp = {
            "userName": $('#name').val(),
            "offset": params.pageNumber,
            "limit": params.pageSize
        }
        return temp;
    }

    /*条件查询*/
    function search() {
        var name = $('#name').val();
        $.ajax({
            url: "${pageContext.request.contextPath}/user/query",
            data: {
                'userName': name,
                'offset': offset,
                'limit': limit
            },
            success: function (data) {
                $('#table').bootstrapTable('load', data)
            }
        })
    }

    /*跳转页面添加*/
    function add() {
        window.location.href = "add.jsp"
    }

    /*后台获取用户职位*/
    function update(id) {
        userid = id;
        //判断是否添加
        var a = 0;
        var str = "";
        $('#modal-id').modal("show");
        $('#modal-id').on("shown.bs.modal", function () {
            if (++a == 1) {
                $.post("${pageContext.request.contextPath}/user/getAll", {"id": id}, function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var da = data[i];
                        var deptid = da.deptid;
                        var deptName = da.deptName;
                        //    是否为True;
                        var ischeck = da.falg;
                        if (ischeck) {
                            str = str + "<div class='radio-inline'><input type='radio' checked name='js'  value=" + deptid + "><label>" + deptName + "</label></div>"
                        } else {
                            str = str + "<div class='radio-inline'><input type='radio' name='js'  value=" + deptid + "><label>" + deptName + "</label></div>"
                        }
                    }
                    $('#updatebody').html(str);
                })
            }
        })
    }

    /*修改职位*/
    var userid;

    function upd() {
        var id = userid;
        var depid = $("input[name='js']:checked").val();
        $.ajax({
            url: "${pageContext.request.contextPath}/user/upd",
            data: {
                "id": id,
                "deptid": depid
            },
            success: function (data) {
                if (data > 0) {
                    swal({
                        "title": "修改成功",
                        "type": "success",
                    }, function (data) {
                        if (data) {
                            history.go(0);
                        }
                    });
                }
            }
        })
    }

    /*批量删除*/
    function del() {
        var rows = $("#table").bootstrapTable("getSelections");
        if (rows < 1) {
            swal({
                title: "请选中一行",
                type: "info"
            })
        } else {
            swal({
                    title: "确定删除？",
                    text: "删除后将无法恢复,请谨慎删除",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#dd6b55",
                    confirmButtonText: "删除",
                    cancelButtonText: "取消",
                    closeOnConfirm: false,
                    closeOnCancel: false
                },
                function (isConfirm) {
                    if (isConfirm) {
                        var ids = new Array();
                        $(rows).each(function () {
                            ids.push(this.attendld);
                        })
                        var id = rows[0].attendld;
                        $.post("${pageContext.request.contextPath}/user/delInfo", {"attendld": ids}, function (data) {
                            if (data > 0) {
                                swal({
                                        title: "操作成功",
                                        type: "success",
                                        confirmButtonText: "OK"
                                    },
                                    function (data) {
                                        if (data) {
                                            history.go(0);
                                        }
                                    });
                            }
                        })
                    } else {
                        swal("Cancelled", "Your imaginary file is safe :)", "error");
                    }
                });
        }
    }

</script>

</html>
